<template>
  <!-- <div class="wot-template-view"></div> -->
  <c-row-view
    v-show="visible"
    class="wot-template-view"
    :title="multLang('模版详情')"
  >
    <template #opn>
      <c-row-view-opn
        :auth="true"
        :visible.sync="visibles.view"
        @cancel="cancel"
        @save="save"
      >
      </c-row-view-opn>
    </template>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="140px"
      :validate-on-rule-change="false"
    >
      <c-row :col="11">
        <c-col>
          <el-form-item
            :label="multLang('模版名称', ':')"
            prop="work_template_name"
          >
            <c-form-edit :visible="visibles.view">
              <template #edit>
                <el-input
                  v-model="form.work_template_name"
                  :placeholder="multLang('text_d')"
                ></el-input>
              </template>
              <span>{{ form.work_template_name }}</span>
            </c-form-edit>
          </el-form-item>
        </c-col>
        <c-col>
          <el-form-item :label="multLang('模版描述', ':')" prop="remark">
            <c-form-edit :visible="visibles.view" long>
              <template #edit>
                <c-input-text v-model="form.remark"></c-input-text>
              </template>
              <span>{{ form.remark }}</span>
            </c-form-edit>
          </el-form-item>
        </c-col>
      </c-row>
    </el-form>
  </c-row-view>
</template>
<script>
import { editTemplateData, getTemplateInfo } from '@/http/api/v1/wot'
import { ObjectCopy } from '@/util'
export default {
  name: 'TemplateView',
  components: {},
  props: {
    visible: { type: Boolean, default: false },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      visibles: { view: false },
      form: {
        work_template_code: '',
        work_template_name: '',
        remark: ''
      }
    }
  },
  computed: {
    rules() {
      return {
        work_template_name: {
          required: true,
          message: this.multLang('模版名称', 'msg_g'),
          trigger: 'blur'
        }
      }
    }
  },
  watch: {
    data() {
      this.query()
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    cancel() {
      // ObjectCopy(this.form, this.$options.data().form)
      this.visibles.view = false
    },
    save() {
      this.$refs.form.validate(
        v =>
          v &&
          editTemplateData(this.form).then(({ code }) => {
            if (code === 200) {
              this.cancel()
              this.query()
              this.$emit('query')
            }
          })
      )
    },
    query() {
      const { work_template_code } = this.data
      work_template_code &&
        getTemplateInfo({ work_template_code }).then(({ data }) =>
          ObjectCopy(this.form, data)
        )
    }
  }
}
</script>
<style lang="scss">
.wot-template-view {
}
</style>
